<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui">

	<h:form id="orderForm">
		<p:poll listener="#{orderManagedBean.getOrders}" update="gridOrders"
			id="poll" interval="3000" />
		<p:growl id="messages" showDetail="true" />
		<h:panelGrid id="gridOrders">
			<p:dataTable var="order" value="#{orderManagedBean.orderList}"
				editable="true" scrollable="true" scrollHeight="300">
				<f:facet name="header">
					<h:outputText value="In-Cell Editing" />
				</f:facet>
				<p:ajax event="rowEdit" listener="#{orderManagedBean.onEdit}"
					update=":tabview1:orderForm:messages" />
				<p:column >
					<p:rowToggler />
				</p:column>

				<p:column headerText="Order ID">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{order.oid}" />
						</f:facet>
						<f:facet name="input">
							<h:outputText value="#{order.oid}" />
						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column headerText="Status" filterBy="#{order.status}"
					id="columnStatus" filterOptions="#{orderManagedBean.statusOptions}">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{order.status}" />
						</f:facet>
						<f:facet name="input">
							<h:selectOneMenu value="#{order.status}" style="width:120px;">
								<f:selectItem itemLabel="Submitted" itemValue="Submitted" />
								<f:selectItem itemLabel="Read" itemValue="Read" />
								<f:selectItem itemLabel="Packed" itemValue="Packed" />
								<f:selectItem itemLabel="Routed" itemValue="Routed" />
								<f:selectItem itemLabel="Delivered" itemValue="Delivered" />
							</h:selectOneMenu>

						</f:facet>
					</p:cellEditor>
				</p:column>
				<p:column>
					<p:rowEditor />
				</p:column>
				<p:rowExpansion>
					<h:panelGrid columns="2" style="border:none;" rendered="#{order.orderType ne 'G'}">
						<h:outputLabel
							value="#{order.userDTO.name} -  #{order.userDTO.mobileno} " />
						<h:outputLabel value="#{order.userDTO.houseno}" />
						<h:outputLabel value="#{order.userDTO.email}" />
						<h:outputLabel value="#{order.userDTO.street}" />
						<h:outputLabel value="#{order.orderDate}" />
						<h:outputLabel value="#{order.userDTO.area}" />
						<h:outputLabel value="" />
						<h:outputLabel value="#{order.userDTO.landmark}" />
						<h:outputLabel value="" />
						<h:outputLabel value="#{order.userDTO.city}" />
					</h:panelGrid>
					<h:panelGrid columns="2" style="border:none;" rendered="#{order.orderType eq 'G'}">
						<h:outputLabel
							value="#{order.guestDTO.name} -  #{order.guestDTO.mobileno} " />
						<h:outputLabel value="#{order.guestDTO.houseno}" />
						<h:outputLabel value="#{order.guestDTO.email}" />
						<h:outputLabel value="#{order.guestDTO.street}" />
						<h:outputLabel value="#{order.orderDate}" />
						<h:outputLabel value="#{order.guestDTO.area}" />
						<h:outputLabel value="" />
						<h:outputLabel value="#{order.guestDTO.landmark}" />
						<h:outputLabel value="" />
						<h:outputLabel value="#{order.guestDTO.city}" />
					</h:panelGrid>
					<p:dataTable var="orderItems" value="#{order.itemsList}"
						scrollable="true" scrollHeight="350">

						<p:column style="width:30%" headerText="Image">
							<p:graphicImage value="#{orderItems.orderItemImage}" />
						</p:column>
						<p:column style="width:50%" headerText="Item Name">
							<h:outputText value="#{orderItems.orderItemName}" />
						</p:column>
						<p:column style="width:10%" headerText="Qty">
							<h:outputText value="#{orderItems.orderItemQty}" />
						</p:column>
					</p:dataTable>

				</p:rowExpansion>

			</p:dataTable>

		</h:panelGrid>
	</h:form>
</ui:composition>